<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
    </ion-buttons>
    <ion-title>list</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-list lines="full">
    <ion-item *ngFor="let item of list" [routerLink]="['/button']">
      <ion-label>{{item}}</ion-label>
    </ion-item>
  </ion-list>


  <ion-list>

    <ion-item-divider>
      <ion-label>分组列表A</ion-label>
    </ion-item-divider>
    <ion-item>
      <ion-label>aaaa</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>aaa</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>A1</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>A2</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>A3</ion-label>
    </ion-item>

    <ion-item-divider>
      <ion-label>B</ion-label>
    </ion-item-divider>

    <ion-item>
      <ion-label>B1</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>B2</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>B3</ion-label>
    </ion-item>
  </ion-list>




  <ion-list lines="full">
    <ion-item [routerLink]="['/button']">
      <ion-icon slot="start" name="people" color="danger"></ion-icon>
      <ion-label>用户中心</ion-label>
    </ion-item>
    <ion-item [routerLink]="['/button']">
      <ion-icon slot="start" name="settings" color="success"></ion-icon>
      <ion-label>设置</ion-label>
    </ion-item>
  </ion-list>




  <ion-list class="mylist">
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/01.png" />
      </ion-avatar>
      <ion-label>头像列表</ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/02.png" />
      </ion-avatar>
      <ion-label>Item Avatar2222</ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/03.png" />
      </ion-avatar>
      <ion-label>Item Avatar333</ion-label>
    </ion-item>

    <ion-item>
      <ion-avatar slot="end">
        <img src="assets/01.png" />
      </ion-avatar>
      <ion-label>Item Avatar333</ion-label>
    </ion-item>

    <ion-item>
      <ion-avatar slot="end">
        <img src="assets/02.png" />
      </ion-avatar>
      <ion-label>Item Avatar333</ion-label>
    </ion-item>


  </ion-list>







  <ion-list class="mylist">
    <ion-item>
      <ion-thumbnail slot="start">
        <ion-img src="assets/01.png"></ion-img>
      </ion-thumbnail>
      <div class="info">
          <h3>图文列表</h3>
          <p>新闻介绍新闻介绍新闻介绍新闻介绍新闻介绍</p>
      </div>
    </ion-item>
    <ion-item>
      <ion-thumbnail slot="start">
        <ion-img src="assets/02.png"></ion-img>
      </ion-thumbnail>
      <ion-label> Item1111</ion-label>
    </ion-item>
    <ion-item>
      <ion-thumbnail slot="start">
        <ion-img src="assets/03.png"></ion-img>
      </ion-thumbnail>
      <ion-label> Item1111</ion-label>
    </ion-item>
    <ion-item>
      <ion-thumbnail slot="end">
        <ion-img src="assets/01.png"></ion-img>
      </ion-thumbnail>
      <ion-label> Item1111</ion-label>
    </ion-item>

    <ion-item>
        <ion-thumbnail slot="end">
          <ion-img src="assets/02.png"></ion-img>
        </ion-thumbnail>
        <ion-label> Item1111</ion-label>
      </ion-item>
  </ion-list>

  


    <ion-list>
      <ion-item-sliding>
        <ion-item>
          <ion-label>滑动列表</ion-label>
        </ion-item>
        <ion-item-options side="start">
          <ion-item-option (click)="favorite(item)" color="success">编辑</ion-item-option>
          <ion-item-option color="primary" color="warning">分享</ion-item-option>
        </ion-item-options>
    
        <ion-item-options side="end">
          <ion-item-option  color="warning">Unread</ion-item-option>
        </ion-item-options>
      </ion-item-sliding>

      <ion-item-sliding>
          <ion-item>
            <ion-label>Item</ion-label>
          </ion-item>
          <ion-item-options side="start">
            <ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
            <ion-item-option color="primary" (click)="share(item)">Share</ion-item-option>
          </ion-item-options>
      
          <ion-item-options side="end">
            <ion-item-option (click)="unread(item)">Unread</ion-item-option>
          </ion-item-options>
        </ion-item-sliding>
        <ion-item-sliding>
            <ion-item>
              <ion-label>Item</ion-label>
            </ion-item>
            <ion-item-options side="start">
              <ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
              <ion-item-option color="primary" (click)="share(item)">Share</ion-item-option>
            </ion-item-options>
        
            <ion-item-options side="end">
              <ion-item-option (click)="unread(item)">Unread</ion-item-option>
            </ion-item-options>
          </ion-item-sliding>
    </ion-list>

</ion-content>